<template>
  <div class="login">
    <!-- 登录 -->
    <div class="login_form">
      <div class="login_form_text">Sport</div>
      <!-- 昵称 -->
      <div class="login_form_iptNickname">
        <div class="img">
          <img src="../assets/images/account_number.png" alt="账号" />
        </div>
        <div class="ipt">
          <input type="text" placeholder="请输入您的账号" />
        </div>
      </div>
      <!-- 密码 -->
      <div class="login_form_iptPwd">
        <div class="img">
          <img src="../assets/images/pwd.png" alt="密码" />
        </div>
        <div class="ipt">
          <input type="password" placeholder="请输入您的账号密码" />
        </div>
      </div>
      <!-- 登录按钮 -->
      <div class="login_form_btnLogin">登录</div>
      <!-- 忘记密码 / 注册账号 -->
      <div class="login_form_contentText">
        <div class="pBox01">忘记密码？</div>
        <div class="pBox02">没有账号，请前往注册</div>
      </div>
      <!-- 其他登录选项 -->
      <div class="other">
        <img src="../assets/images/wx_purple.png" alt="wx" />
      </div>
      <!-- 动画 -->
      <div class="myAnimation">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.3);
  }

  100% {
    transform: scale(1);
  }
}

.login {
  width: 100vw;
  height: 100vh;
  background-color: #061439;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 1px solid white;
  position: relative;

  .login_form {
    width: 320px;
    height: 450px;
    background: #061439;
    border: 5px solid white;
    border-radius: 20px;

    .login_form_text {
      font-size: 36px;
      font-weight: 700;
      text-align: center;
      margin: 25px 0 30px 0;
    }

    .login_form_iptNickname,
    .login_form_iptPwd {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0 0 0;

      .img {
        img {
          width: 45px;
          vertical-align: bottom;
        }
      }

      .ipt {
        margin: 0 0 0 10px;

        input {
          border: 1px solid #061439;
          border-radius: 20px;
          outline: none;
          //   background: aqua;
          width: 160px;
          height: 36px;
          padding: 0 0 0 10px;
        }
      }
    }

    .login_form_btnLogin {
      //   background: aqua;
      // border: 1px solid red;
      width: 90px;
      height: 40px;
      display: flex;
      justify-content: center;
      color: #061439;
      align-items: center;
      margin: 20px auto;
      position: relative;
      overflow: hidden;
      z-index: 0;
      border-radius: 10px;

      &::before {
        content: "";
        inset: -30px;
        background: #061439;
        position: absolute;
        background-image: conic-gradient(transparent, aqua, transparent 10%);
        animation: rotate 3s linear infinite;
        z-index: -5;
      }

      &::after {
        content: "";
        inset: 3px;
        background: white;
        position: absolute;
        z-index: -3;
        border-radius: 10px;
      }
    }

    .login_form_contentText {
      display: flex;
      justify-content: space-around;
      font-size: 12px;

      .pBox01 {
        color: red;
      }
    }

    .other {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 30px 0 0 0;

      img {
        width: 36px;
      }
    }
  }

  // 动画
  .myAnimation {
    width: 120px;
    height: 60px;
    // background: aqua;
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -60px;

    ul {
      width: 100%;
      height: 60px;
      //   background: gray;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      li {
        width: 5px;
        height: 60px;
        background: red;
        // border-radius: 30px;

        &:nth-child(1) {
          animation: loading 1.2s linear 0.2s infinite;
        }

        &:nth-child(1) {
          animation: loading 1.2s linear 0.2s infinite;
        }

        &:nth-child(2) {
          animation: loading 1s linear 0.2s infinite;
        }

        &:nth-child(3) {
          animation: loading 1s linear 0.4s infinite;
        }

        &:nth-child(4) {
          animation: loading 1s linear 0.6s infinite;
        }

        &:nth-child(5) {
          animation: loading 1s linear 0.8s infinite;
        }

        &:nth-child(6) {
          animation: loading 1s linear 1s infinite;
        }
      }
    }
  }
}
</style>
